<template>
  <el-dialog
    :title="showTitle"
   :visible="showDialog"
    @close="btnCancel"
   >
    <el-form :model="formadata" :rules="rules" ref="formadata" label-width="120px" >
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formadata.name"  style="width:80%" placeholder="1-50个字符"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formadata.code" style="width:80%" placeholder="1-50个字符"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="formadata.manager" style="width:80%" placeholder="请选择" @focus="getEmployeeSimple">
<!-- 需要循环生成选项   这里做一下简单的处理 显示的是用户名 存的也是用户名 -->
          <el-option v-for="item in peoples" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formadata.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3"></el-input>
      </el-form-item>


    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="btnCancel">取 消</el-button>
    <el-button type="primary" @click="btnOK">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
import { getDpartments,addDepartments,getDepartDetail,updateDepartments} from "@/api/departments";
import {getEmployeeSimple} from "@/api/employees";


export default {
props:{
  showDialog:{

    type:Boolean,
    default:false
  },
  //当前操作的节点
  treeNode:{
    type:Object,
    default: null
  }
},
  data(){
    //自定义校验规则
    //================校验名称是否重复
    const namevalidate =async (rule, value, callback)=>{
    //  校验这个部门名字是否重复，得先获取最新的组织架构数据
      const { depts }=await getDpartments()
      let isRepeat = false
      if (this.formadata.id){
        //有id就是编辑模式
        // 编辑 张三 => 校验规则 除了我之外 同级部门下 不能有叫张三的
        isRepeat = depts.filter(item => item.id !== this.formadata.id && item.pid === this.treeNode.pid).some(item => item.name === value)
      }else {
        // 没id就是新增模式
        isRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
      }
      isRepeat ? callback(new Error(`同级部门下已经有同名称的部门了`)) : callback()

    }



    //================校验编码是否重复
    const codevalidate=async (rule,value,callback)=>{
      const { depts }=await getDpartments()
      let isRepeat = false
      if (this.formadata.id){
        // 编辑模式  因为编辑模式下 不能算自己
        isRepeat = depts.some(item => item.id !== this.formadata.id && item.code === value && value)

      }else {
          // 新增模式
        isRepeat = depts.some(item => item.code === value && value) // 这里加一个 value不为空 因为我们的部门有可能没有code
      }

      isRepeat ? callback(new Error(`编码已存在`)) : callback()

    }



  return {
    //==============表单
    formadata: {
      name: '',
      code: '',
      manager: '',
      introduce: '',
    },

    //==============校验规则
    rules: {
      name: [{required: true, message: '请输入部门名称', trigger: 'blur'},
        {min: 2, max: 20, message: '部门名称要求1-20个字符', trigger: 'blur'},
        {validator: namevalidate, trigger: 'blur' }
      ],
      code: [{required: true, message: '请输入编码', trigger: 'blur'},
        {min: 1, max: 20, message: '部门编码要求1-20个字符', trigger: 'blur'},
        {validator: codevalidate, trigger: 'blur' }
      ,],
      manager: [{required: true, message: '请输入部门负责人名字', trigger: 'blur'}],
      introduce: [{required: true, message: '请输入部门介绍', trigger: 'blur'},
        {trigger: 'blur', min: 1, max: 300, message: '部门介绍要求1-50个字符'}
      ],
    },
    peoples:[]


  }


  },
  methods:{
    //获取员工的简单信息
    async  getEmployeeSimple() {
      this.peoples = await getEmployeeSimple()
    },

    //点击确认按钮，提交新增表单的方法
    btnOK(){
      this.$refs.formadata.validate(async isok =>{
        if (isok){
          if (this.formadata.id){
          //  编辑
            await updateDepartments(this.formadata)
          }else {
            //新增
            //把表单数据传进去新增接口（pid就是当前操作的节点的id）
            await addDepartments({...this.formadata,pid:this.treeNode.id})
          }


          this.$emit('addOk') //告诉父组件添加完成，让父组件重新获取一下数据
          this.$emit('update:showDialog',false)
          this.$message.success('更新数据成功')

        }
      })


    },

  //  取消时关闭弹窗并且清空表单数据
    btnCancel(){
      // 重置数据  因为resetFields 只能重置 表单上的数据 非表单上的 比如 编辑中id 不能重置
      this.formadata = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
      this.$emit('update:showDialog',false)
      // 清除之前的校验  可以重置数据 但是！！！只能重置 定义在data中的数据
      this.$refs.formadata.resetFields()

    },

    async  getDepartDetail(id) {
      this.formadata = await getDepartDetail(id)

    }
  },

computed:{
  showTitle(){
  return   this.formadata.id ? '编辑部门' : '添加子部门'

  }

}

}
</script>

<style scoped>

</style>
